/* ---------------------------------------------------- */
/* BODY, ENTIRE WEBSITE                                 */
/* ---------------------------------------------------- */
body {
    margin: 0; /* Important for full-width/height designs */
    color: black; /* Default text color */
    font-family:'Times New Roman', Times, serif; /* Fallback for fonts */
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-image: url("../Imagery/Equipment pictures/mixer1.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ---------------------------------------------------- */
/* WELCOME GREETING                                     */
/* ---------------------------------------------------- */
.welcome {
    z-index: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0px;
    padding: 0;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    /*border-bottom: 5px solid #f6a900;*/
    /*box-shadow: 0px 5px 13px 2px black;*/
}
.greeting {
    font-size: clamp(1rem, 3vw, 5rem);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    letter-spacing: 3px;
    margin: 0.1em auto 0.05em;
    color: white;
}
.brand-name {
    font-size: clamp(1.5rem, 5vw + 0.5rem, 9rem);
    font-family: 'Times New Roman', Times, serif;
    margin: 0.05em auto 0.1em;
    line-height: 1;
    color: #f6a900;
    /*-webkit-text-stroke: 1.5px black;*/
    text-shadow: 0 4px 6px black;
}


/* ---------------------------------------------------- */
/* MAIN LAYOUT CONTAINER (FOR CENTERING AND SPACING)    */
/* ---------------------------------------------------- */
.hero-content {
    /* Full-screen centering container (from earlier discussion) */
    display: flex; 
    flex-direction: row; /* Arranges cards horizontally */
    justify-content: center; /* Centers the group of cards horizontally */
    align-items: flex-start; /* Aligns cards to the top of the container */
    justify-content: center;
    
    /* Creates space around the cards and the screen borders */
    gap: 50px; /* Space between the cards */
    padding: 60px 30px 10px; /* Padding inside the screen edges */
    
    /* Allows the cards to take up the rest of the vertical space */
    flex-grow: 1; 
    flex-wrap: wrap;
    
    
}
/* ---------------------------------------------------- */
/* INDIVIDUAL DESTINATION CARD STYLES                   */
/* ---------------------------------------------------- */
.destination-card {
    /* Ensures the card content (image + text) is centered */
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    
    /* Constrain the card width for a manageable size */
    /* max-width: 800px; */
    max-width: 35vw;
    width: 100%; /* Allows it to fully fill the space given by the flex container */
    /* CRITICAL FIX: Include padding and border in the 100% width */
    box-sizing: border-box;
}
/* 1. Eliminate the Default Margin on the Heading */
.destination-card h2 {
    /* Reset default top and bottom margins common to h-tags */
    margin: 0;
    padding: 0; /* Also good practice to reset padding */
    width: 100%;
}
.destination-card img {
    /* CRITICAL CHANGE: Use max-width for responsiveness */
    max-width: 100%; /* Ensures the image never overflows the card width */
    height: auto;
    
    /* Removed fixed 800px width—it would break the layout */
    /* If you want a fixed size, use a smaller max-width (e.g., max-width: 300px) */
    /*width: 800px;  Sets a reasonable fixed size for the logo */
    max-width: 100%;
    
    /* Added style to make the logo look like a button/link */
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.destination-card a:hover img {
    transform: scale(1.05);
    box-shadow: 0 0 15px 5px #f6a900;
}
.destination-card .destination-text {
    font-size: 1.4rem;
    margin-top: 10px; /* Creates a clean separation from the logo */
    color: black;
    font-family: Arial, sans-serif;
    padding: 10px;
    width: 100%;
    background-color: white;
    border: 2px solid black;
    box-sizing: border-box;
}
.destination-text h3 {
    font-size: 2rem;
    font-weight: bold;
    color: #f6a900;
    /* Reset margins for tight control and space from the p text */
    margin: 0 0 5px; /* Small margin-bottom to space from the p text */
    font-family:'Times New Roman', Times, serif;
    text-shadow: 0px 0px 4px 2px black;
}

/* Footer Styling */
#footer {
    display: block;
    padding: 20px;
    background-color: #000000; /* Solid background for footer */
    text-align: center;
    flex-shrink: 0;
}

#footer p {
    margin: 0;
    font-size: 0.9em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: white;
}


/* --------------------------------------------- */
/* MAKING IT RESPONSIVE FOR SMALLER SCREENS      */
/* --------------------------------------------- */

@media (min-width: 769px) and (max-width: 1024px) {
    .destination-card {
        max-width: 70%;
    }

    .hero-content {
        flex-direction: column; /* Stacks the cards vertically */
        align-items: center; /* Centers the stacked cards */
        padding: 0 10px 0; /* Adjust padding for mobile screens */
    }

    .destination-card img {
        box-shadow: 0 0 15px 4px black;
    }
}

@media (max-width: 768px) {
    .welcome {
        padding-top: 10px;
    }

    /* Reduce the perceived stroke thickness on smaller screens */
    .brand-name {
        -webkit-text-stroke: 0px black;
        text-shadow: 0 2px 4px black;
        font-size: 1.4rem;
    }

    /* Reduce gap between header and hero-content */
    .hero-content {
        gap: 3px;
        flex-direction: column; /* Stacks the cards vertically */
        align-items: center; /* Centers the stacked cards */
        padding: 0 10px 0; /* Adjust padding for mobile screens */
    }

    .destination-card {
        padding: 0 0 10px 0;
        max-width: 80%;
    }

    /* Reduce destination-card text side */
    .destination-text h3 {
        font-size: 1rem;
    }
    
    /* Shrink the paragraph text */
    .destination-text p {
        font-size: 0.8rem;
    }

    /* Increase logo shadow to show it's a button */
    .destination-card img {
        box-shadow: 0 0 15px 4px black;
    }
}